<template>
  <div>
    <Echart
        :options="options"
        height="5rem"
        width="4rem"
    ></Echart>
  </div>
</template>

<script>
import Echart from '@/common/echart'

export default {
  // data() {
  //   return {
  //     options:
  //         {
  //           title: {
  //             text: '风险地图'
  //           },
  //           tooltip: {},
  //           // legend: {
  //           //   data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
  //           // },
  //           radar: {
  //             // shape: 'circle',
  //             name: {
  //               textStyle: {
  //                 color: '#000000',
  //                 // backgroundColor: '#',
  //                 borderRadius: 3,
  //                 padding: [3, 5]
  //               }
  //             },
  //             indicator: [
  //               {name: '质量风险', max: 2000},
  //               {name: '技术风险', max: 2000},
  //               {name: '行为风险', max: 2000},
  //               {name: '进度风险', max: 2000},
  //               {name: '其他风险', max: 2000}
  //             ]
  //           },
  //           series: [{
  //             name: '',
  //             type: 'radar',
  //             areaStyle: {normal: {}},
  //             data: [
  //               {
  //                 value: [100, 1000, 280, 350, 500, 1900],
  //                 name: ''
  //               },
  //             ]
  //           }]
  //         },

  //   };
  // },
  data () {
    return {
      options: {},
      // 定义颜色
    };
  },
  components: {
    Echart,
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    },
  },
  watch: {
    cdata: {
      handler (newData) {
        this.options = 
          {
            title: {
              text: '风险地图',
              textStyle:{
                color:"#CCFFFF",
                // fontSize:"18"
            },
              fontSize:"18",
              fontWeight:"bold"
            },
            tooltip: {},
            // legend: {
            //   data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
            // },
            radar: {
              // shape: 'circle',
              name: {
                textStyle: {
                  color: '#CCFFFF',
                  // backgroundColor: '#',
                  borderRadius: 1,
                  // padding: [3, 5]
                },
                fontSize:14,
              },
              // grid: {
              //   x: "5%",
              //   width: "90%",
              //   // height: "100%",
              //   y: "8%"
              // },
              nameGap:2,
              radius: ["0%", "50%"],
              // center:['50%', '50%'],
              indicator: [
                {name: '质量风险', max: 5},
                {name: '技术风险', max: 5},
                {name: '行为风险', max: 5},
                {name: '进度风险', max: 5},
                {name: '其他风险', max: 5}
              ]
            },
            series: [{
              name: '',
              type: 'radar',
              // fontSize:14,
              areaStyle: {normal: {}},
              data: [
                {
                  value: [newData.qualityRisk, newData.technologyRisk, newData.behaviorRisk,newData.processRisk, newData.otherRisk],
                  name: '',
                  // radius:50
                },
              ]
            }]
          }
      },
      immediate: true,
      deep: true
    }
  }
}
</script>